<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Test TimeTextBox Widget</title>

		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			@import "../css/dijitTests.css";

			.testExample {
				background-color:#fbfbfb;
				padding:1em;
				margin-bottom:1em;
				border:1px solid #bfbfbf;
			}

			.noticeMessage {
				color:#093669;
				font-size:0.95em;
				margin-left:0.5em;
			}

			.dojoTitlePaneLabel label {
				font-weight:bold;
			}
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css">

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			djConfig="isDebug: true, parseOnLoad: true"></script>

		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../_testCommon.js"></script>

		<script type="text/javascript">
			dojo.require("dijit.dijit"); // optimize: load dijit layer
			dojo.require("dijit.form.TextBox");
			dojo.require("dijit.form.ValidationTextBox");
			dojo.require("dijit.form.NumberTextBox");
			dojo.require("dijit.form.CurrencyTextBox");
			dojo.require("dijit.form.DateTextBox");
			dojo.require("dijit.form.TimeTextBox");
			dojo.require("dojo.currency");
			dojo.require("dojo.date.locale");
			dojo.require("dojo.parser");	// scan page for widgets and instantiate them
		</script>
	</head>

	<body class="claro">
		<h1 class="testTitle">Test TimeTextBox Widget</h1>
		<!--	to test form submission, you'll need to create an action handler similar to
			http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
		<form id="form1" action="" name="example" method="">

	<div class="dojoTitlePaneLabel">
		<label for="q1">Time using local conventions with seconds</label>
		<span class="noticeMessage">TimeTextBox class,
			Attributes: {formatLength:'medium'}</span>
	</div>
	<div class="testExample">
		<input id="q1" type="text" name="time1" value="T17:45:00"
			dojoType="dijit.form.TimeTextBox"
			constraints="{formatLength:'medium'}"
			required="true"
			onChange="dojo.byId('oc1').value=arguments[0]"
			invalidMessage="Invalid time." />
		onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
	</div>

	<div class="dojoTitlePaneLabel">
		<label for="q2">Time using local conventions without seconds, required, no invalid message tooltip</label>
		<span class="noticeMessage">TimeTextBox class,
			Attributes: {formatLength:'short'}</span>
	</div>
	<div class="testExample">
		<input id="q2" type="text" name="time1a" value="T17:45:00"
			dojoType="dijit.form.TimeTextBox"
			constraints="{formatLength:'short'}"
			required="true"
			invalidMessage="" />
	</div>

	<div class="dojoTitlePaneLabel">
		<label for="q3"> 12 Hour Time </label>
		<span class="noticeMessage">TimeTextBox class,
			Attributes: {timePattern:'h:mm:ss a'}</span>
	</div>
	<div class="testExample">
		<input id="q3" type="text" name="time1b" value="T17:45:00"
			dojoType="dijit.form.TimeTextBox"
			constraints="{timePattern:'h:mm:ss a'}"
			required="true"
			invalidMessage="Invalid time." />
	</div>

	<div class="dojoTitlePaneLabel">
		<label for="q4"> 24 Hour Time</label>
		<span class="noticeMessage">TimeTextBox class,
			Attributes: {timePattern:'HH:mm:ss'}</span>
	</div>
	<div class="testExample">
		<input id="q4" type="text" name="time2" value="T17:45:00"
			dojoType="dijit.form.TimeTextBox"
			constraints="{timePattern:'HH:mm:ss'}"
			required="true"
			invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
	</div>

	<div class="dojoTitlePaneLabel">
		<label for="q5">24 Hour Time with 1 Hour TimePicker</label>
		<span class="noticeMessage">TimeTextBox class,
			Attributes: {timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}</span>
	</div>
	<div class="testExample">
		<input id="q5" type="text" name="time2" value="T17:45:00"
			dojoType="dijit.form.TimeTextBox"
			constraints="{timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}"
			required="true"
			invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
	</div>

	<div class="dojoTitlePaneLabel">
		<label for="q6">Initially empty time text box</label>
		<span class="noticeMessage">TimeTextBox class,
			Attributes: {formatLength:'medium',min:'T00:00:00',max:'T12:00:00'}</span>
	</div>
	<div class="testExample">
		<input id="q6" type="text" name="time6"
			dojoType="dijit.form.TimeTextBox"
			constraints="{formatLength:'medium',min:'T00:00:00',max:'T12:00:00'}"
			required="true"
			onChange="dojo.byId('oc6').value=arguments[0]"
			invalidMessage="Invalid time." />
		onChange:<input id="oc6" size="34" disabled value="not fired yet!" autocomplete="off">
	</div>
	<div class="dojoTitlePaneLabel">
		<strong>Using title attribute for label.</strong>
		<span class="noticeMessage">TimeTextBox class,
			Attributes: {formatLength:'short'} Time using local conventions without seconds, required, no invalid message tooltip</span>
	</div>
	<div class="testExample">
		<input id="q20" type="text" name="q20" value="T17:45:00"
			dojoType="dijit.form.TimeTextBox"
			title="title: Time using local conventions"
			constraints="{formatLength:'short'}"
			required="true"
			invalidMessage="" />
	</div>

	<script>
	        function displayData() {
	                var f = document.getElementById("form1");
	                var s = "";
	                for (var i = 0; i < f.elements.length; i++) {
	                        var elem = f.elements[i];
	                        if (elem.name == "button")  { continue; }
	                        s += elem.name + ": " + elem.value + "\n";
	                }
	                alert(s);
	        }
	</script>

		<div>
			<button name="button" onclick="displayData(); return false;">view data</button>
			<input type="submit" name="submit" />
		</div>

		</form>
	</body>
</html>
